<template>
  <div>
    <h1>我是App.vue</h1>

    <!-- url这个变量是什么，href的值就是什么 -->
    <!-- <a v-bind:href="url"></a> -->
    <!-- <a :href="url"></a>  -->

    <!-- <my-goods :price="price" :title="title" :desc="desc"/>
    <my-goods title="沙县小吃" price="14" desc="福建大酒店特产"/> -->

    <!-- 代表把每一项赋值给title、price、desc -->
    <my-goods 
      v-for="item in list" 
      :key="item.id" 
      :title="item.title"
      :price="item.price"
      :desc="item.desc"
      @changePrice="changePrice"
    />
  </div>
</template>

<script>
// 导入组件
import MyGoods from "./components/MyGoods";
export default {
  // 注册组件
  components: {
    MyGoods,
  },

  data() {
    return {
      // title:'螺蛳粉',
      // price: 15,
      // desc: '吃完很臭'

      list: [
        { id: 1, title: "螺蛳粉", price: 15, desc: "吃完很臭" },
        { id: 32, title: "猪脚饭", price: 13, desc: "吃完很胖" },
        { id: 54, title: "啃馒头", price: 1, desc: "吃完很饱" },
      ],
    };
  },

  methods: {
    changePrice (price, title) {
      
      // 找到对应的商品减掉对应的价格
      this.list.forEach( v => {
        // 判断每一项标题是不是传递过来的标题
        // 如果是就减掉价格
        if (v.title == title) {
          v.price -= price
        }
      })
    }
  }
};
</script>

<style>
</style>